<template>
  <!-- 首页宫格栏 -->
  <div class="home-grid">
    <van-swipe :show-indicators="false">
      <van-swipe-item class="flex flex-wrap" v-for="(item, index) in pages" :key="index">
        <div class="grid-item shadow flex flex-col items-center justify-center" v-for="(item1, index1) in item" :key="index1">
          <i class="iconfont" :class="item1.icon"></i>
          <span class="item-title">{{ item1.name }}</span>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: 'HomeGrid',
  props: {
    list: Array,
  },
  computed: {
    pages() {
      const list = []
      this.list.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!list[page]) {
          list[page] = []
        }
        list[page].push(item)
      })
      return list
    },
  },
}
</script>

<style lang="scss" scoped>
.home-grid {
  width: 100%;
  padding: 0.2rem;
  .grid-item {
    width: 22%;
    height: 0.88rem;
    background: #fff;
    margin: 0.05rem;
    border-radius: 0.1rem;
    .iconfont {
      font-size: 0.36rem;
    }
    .item-title {
      font-size: 0.16rem;
    }
  }
}
</style>
